<template>
  <!-- 背包页面组件，管理玩家物品、装备和材料 -->
  <div class="inventory-container">
    
    <!-- 背包主区域卡片 -->
    <el-card class="inventory-section">
      <template #header>
        <div class="card-header">
          <span>背包</span>
          <!-- 显示背包总重量和最大承重 -->
          <span>总重量: {{ totalWeight }}/{{ maxWeight }}</span>
        </div>
      </template>
      <div class="inventory-content">
        <!-- 物品分类标签页 -->
        <el-tabs v-model="activeTab">
          <!-- 装备标签页 -->
          <el-tab-pane label="装备" name="equipment">
            <!-- 循环显示装备物品 -->
            <div class="items-grid">
              <div 
                v-for="item in equipmentItems" 
                :key="item.id" 
                class="item-cell"
                :class="getItemRarityClass(item.rarity)"
                @click="selectItem(item)"
              >
                <div class="item-icon">
                  <!-- 动态显示物品图标 -->
                  <component :is="getItemIconComponent(item.type)" />
                </div>
                <div class="item-info">
                  <!-- 物品名称 -->
                  <div class="item-name">{{ item.name }}</div>
                  <!-- 物品等级 -->
                  <div class="item-level">{{ item.level }}级</div>
                </div>
              </div>
            </div>
            
            <!-- 骨架屏 -->
            <div v-if="equipmentItems.length === 0" class="items-grid">
              <div 
                v-for="i in 8" 
                :key="'skeleton-' + i" 
                class="item-cell skeleton-item"
              >
                <div class="skeleton-icon"></div>
                <div class="skeleton-text"></div>
                <div class="skeleton-subtext"></div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 消耗品标签页 -->
          <el-tab-pane label="消耗品" name="consumables">
            <!-- 循环显示消耗品 -->
            <div class="items-grid">
              <div 
                v-for="item in consumableItems" 
                :key="item.id" 
                class="item-cell"
                :class="getItemRarityClass(item.rarity)"
                @click="selectItem(item)"
              >
                <div class="item-icon">
                  <!-- 动态显示物品图标 -->
                  <component :is="getItemIconComponent(item.type)" />
                </div>
                <div class="item-info">
                  <!-- 物品名称 -->
                  <div class="item-name">{{ item.name }}</div>
                  <!-- 物品数量 -->
                  <div class="item-quantity">数量: {{ item.quantity }}</div>
                </div>
              </div>
            </div>
            
            <!-- 骨架屏 -->
            <div v-if="consumableItems.length === 0" class="items-grid">
              <div 
                v-for="i in 8" 
                :key="'skeleton-' + i" 
                class="item-cell skeleton-item"
              >
                <div class="skeleton-icon"></div>
                <div class="skeleton-text"></div>
                <div class="skeleton-subtext"></div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 材料标签页 -->
          <el-tab-pane label="材料" name="materials">
            <!-- 循环显示材料 -->
            <div class="items-grid">
              <div 
                v-for="item in materialItems" 
                :key="item.id" 
                class="item-cell"
                :class="getItemRarityClass(item.rarity)"
                @click="selectItem(item)"
              >
                <div class="item-icon">
                  <!-- 动态显示物品图标 -->
                  <component :is="getItemIconComponent(item.type)" />
                </div>
                <div class="item-info">
                  <!-- 物品名称 -->
                  <div class="item-name">{{ item.name }}</div>
                  <!-- 物品数量 -->
                  <div class="item-quantity">数量: {{ item.quantity }}</div>
                </div>
              </div>
            </div>
            
            <!-- 骨架屏 -->
            <div v-if="materialItems.length === 0" class="items-grid">
              <div 
                v-for="i in 8" 
                :key="'skeleton-' + i" 
                class="item-cell skeleton-item"
              >
                <div class="skeleton-icon"></div>
                <div class="skeleton-text"></div>
                <div class="skeleton-subtext"></div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    
    <!-- 物品详情对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="selectedItem?.name" 
      width="90%" 
      max-width="500px"
      :modal="true"
      :lock-scroll="true"
      :show-close="true"
      :before-close="handleDialogClose"
    >
      <div v-if="selectedItem" class="item-detail">
        <!-- 物品详情头部，包含稀有度样式 -->
        <div class="item-detail-header" :class="getItemRarityClass(selectedItem.rarity)">
          <div class="item-detail-icon">
            <!-- 动态显示物品图标 -->
            <component :is="getItemIconComponent(selectedItem.type)" />
          </div>
          <div class="item-detail-info">
            <!-- 物品名称 -->
            <div class="item-detail-name">{{ selectedItem.name }}</div>
            <!-- 物品稀有度 -->
            <div class="item-detail-rarity">{{ getRarityText(selectedItem.rarity) }}</div>
          </div>
        </div>
        <!-- 物品描述 -->
        <div class="item-detail-description">
          <p>{{ selectedItem.description }}</p>
        </div>
        <!-- 物品属性列表 -->
        <div class="item-detail-properties" v-if="selectedItem.properties">
          <h4>属性:</h4>
          <div v-for="(value, key) in selectedItem.properties" :key="key" class="property-item">
            <span class="property-name">{{ getPropertyText(key) }}:</span>
            <span class="property-value">{{ value }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="useItem(selectedItem)">使用</el-button>
          <el-button @click="discardItem(selectedItem)">丢弃</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 添加占位元素 -->
    <div class="placeholder"></div>
  </div>
</template>

<script>
// 导入响应式引用功能
import { ref } from 'vue'
// 导入游戏状态管理store
import { useGameStateStore } from '../stores/gameState'
export default {
  name: 'Inventory',
  setup() {
    // 使用游戏状态store
    const gameState = useGameStateStore()
    // 当前激活的标签页
    const activeTab = ref('equipment')
    // 控制物品详情对话框显示
    const dialogVisible = ref(false)
    // 当前选中的物品
    const selectedItem = ref(null)

    // 背包总重量
    const totalWeight = ref(gameState.inventory.totalWeight)
    // 背包最大承重
    const maxWeight = ref(gameState.inventory.maxWeight)

    // 装备物品列表
    const equipmentItems = ref(gameState.getItemsByType('equipment'))
    // 消耗品列表
    const consumableItems = ref(gameState.getItemsByType('consumables'))
    // 材料列表
    const materialItems = ref(gameState.getItemsByType('materials'))

    // 根据物品类型获取标签类型
    const getItemTypeTag = (type) => {
      switch(type) {
        case '武器': return 'danger'
        case '防具': return 'warning'
        case '丹药': return 'success'
        case '材料': return ''
        default: return ''
      }
    }

    // 根据稀有度获取样式类
    const getItemRarityClass = (rarity) => {
      return `rarity-${rarity}`
    }

    // 根据物品类型获取图标组件
    const getItemIconComponent = (type) => {
      const iconMap = {
        '武器': 'Medal',
        '防具': 'Medal',
        '护手': 'Medal',
        '上衣': 'Medal',
        '丹药': 'Guide',
        '材料': 'Collection'
      }
      return iconMap[type] || 'Box'
    }

    // 获取稀有度文本
    const getRarityText = (rarity) => {
      return rarity
    }

    // 获取属性文本
    const getPropertyText = (property) => {
      const propertyMap = {
        '攻击': '攻击',
        '防御': '防御',
        '暴击率': '暴击率',
        '生命值': '生命值',
        '格挡率': '格挡率',
        '修为': '修为',
        '生命恢复': '生命恢复',
        '法力恢复': '法力恢复'
      }
      return propertyMap[property] || property
    }

    // 使用物品方法
    const useItem = (item) => {
      console.log('使用物品:', item.name)
      dialogVisible.value = false
    }

    // 丢弃物品方法
    const discardItem = (item) => {
      console.log('丢弃物品:', item.name)
      dialogVisible.value = false
    }
    
    // 关闭对话框前的处理
    const handleDialogClose = (done) => {
      dialogVisible.value = false
      done()
    }
    
    // 选择物品方法
    const selectItem = (item) => {
      selectedItem.value = item
      dialogVisible.value = true
    }

    // 返回数据和方法供模板使用
    return {
      activeTab,
      totalWeight,
      maxWeight,
      equipmentItems,
      consumableItems,
      materialItems,
      dialogVisible,
      selectedItem,
      getItemTypeTag,
      getItemRarityClass,
      getItemIconComponent,
      getRarityText,
      getPropertyText,
      useItem,
      discardItem,
      selectItem,
      handleDialogClose
    }
  }
}
</script>

<style scoped>
/* 骨架屏样式 */
.skeleton-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0e0e0;
  margin-bottom: 5px;
}

.skeleton-text {
  width: 60px;
  height: 12px;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 4px;
}

.skeleton-subtext {
  width: 40px;
  height: 10px;
  background: #e0e0e0;
  border-radius: 4px;
}

/* 背包页面容器样式 */
.inventory-container {
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-scrollbar: none;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 70px;
  padding-top: 50px;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 物品网格布局样式 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  padding: 10px 0;
}

/* 物品单元格样式 */
.item-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

/* 物品单元格悬停效果 */
.item-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 物品图标样式 */
.item-icon {
  font-size: 24px;
  margin-bottom: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 物品信息样式 */
.item-info {
  text-align: center;
  font-size: 12px;
}

/* 物品名称样式 */
.item-name {
  font-weight: bold;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* 物品等级样式 */
.item-level {
  color: #666;
}

/* 物品数量样式 */
.item-quantity {
  color: #666;
}

/* 不同稀有度的样式 */
.rarity-普通 {
  background-color: #f5f5f5;
}

.rarity-优秀 {
  background-color: #e8f4ff;
  border-color: #409eff;
}

.rarity-精良 {
  background-color: #f0f9ff;
  border-color: #67c23a;
}

.rarity-史诗 {
  background-color: #fdf6ec;
  border-color: #e6a23c;
}

.rarity-传说 {
  background-color: #f4f4f5;
  border-color: #909399;
}

/* 物品详情头部样式 */
.item-detail-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* 物品详情图标样式 */
.item-detail-icon {
  font-size: 32px;
  margin-right: 15px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 物品详情信息样式 */
.item-detail-info {
  flex: 1;
}

/* 物品详情名称样式 */
.item-detail-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 物品详情稀有度样式 */
.item-detail-rarity {
  font-size: 14px;
  color: #666;
}

/* 物品详情描述样式 */
.item-detail-description {
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 物品详情属性样式 */
.item-detail-properties h4 {
  margin: 15px 0 10px 0;
  font-size: 16px;
}

/* 属性项样式 */
.property-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

/* 属性名称样式 */
.property-name {
  font-weight: bold;
}

/* 属性值样式 */
.property-value {
  color: #409eff;
}

/* 占位符样式 */
.placeholder {
  height: 70px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .inventory-container {
    padding: 10px;
    padding-bottom: 70px;
    padding-top: 45px;
  }
  
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }
  
  .item-cell {
    padding: 8px;
  }
  
  .item-icon {
    font-size: 20px;
  }
  
  .item-info {
    font-size: 11px;
  }
  
  .item-name {
    max-width: 70px;
  }
  
  .placeholder {
    height: 60px;
  }
}

@media screen and (max-width: 480px) {
  .inventory-container {
    padding-top: 40px;
  }
  
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
  }
  
  .item-cell {
    padding: 6px;
  }
  
  .item-icon {
    font-size: 18px;
  }
  
  .item-info {
    font-size: 10px;
  }
  
  .item-name {
    max-width: 60px;
  }
  
  .placeholder {
    height: 60px;
  }
}
</style>